<template>
    <el-container style="height: 90vh; border: 1px solid #eee">
        <el-aside width="160px">
            <el-row>
                <h4><a href="#/staff_department">部门列表</a></h4>
                <el-menu router :default-active="defaultIndex">
                    <el-menu-item v-for="(department,index) in departments" :key="department.id"
                                  :index="'/staff_list/'+department.id">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{department.name}}</span>
                    </el-menu-item>
                    <el-menu-item index="/staff_list/null">
                        <i class="el-icon-menu"></i>
                        <span slot="title">未指定</span>
                    </el-menu-item>
                </el-menu>
            </el-row>
        </el-aside>
        <router-view :departments="departments" @departmentIdChange="handleChange"></router-view>
    </el-container>
</template>
<script>
    export default{
        data(){
            return {
                departments: '',
                defaultIndex:''
            }
        },
        created(){
            axios.get('api/v1/department').then(result => {
                this.departments = result.data;
            })
        },
        methods: {
            handleChange(){
                this.defaultIndex="/staff_list/"+this.$route.params.department_id;
            }
        }
    }
</script>
